<template>
  <!-- 坞修单详情 -->
  <div
    class="DockOrderDetail"
    v-if="info"
  >
    <div class="g-con">
      <div class="flexsb">
        <div class="wp-50">{{ t('DockOrderOnlineQuotation.t27') }}: {{ info.orderNo }}</div>
        <div class="wp-50">{{ t('DockOrderOnlineQuotation.t28') }}: {{ info.dockOrderName }}</div>
      </div>

      <div class="info mt-3">
        <div class="tit">{{ t('DockOrderOnlineQuotation.t29') }}</div>
        <div class="con flexsb mt-2">
          <div>{{ t('DockOrderOnlineQuotation.t30') }}：{{ info.createByName }}</div>
          <div>{{ t('DockOrderOnlineQuotation.t31') }}：{{ dateFormat(info.createTime) }}</div>
          <div>{{ t('DockOrderOnlineQuotation.t32') }}：{{ dateFormat(info.updateTime) }}</div>
          <div>{{ t('DockOrderOnlineQuotation.t33') }}：{{ dateFormat(info.quotationEndTime) }}</div>
        </div>
      </div>

      <div class="info ship mt-2">
        <div class="left">
          <img
            :src="info.shcwShippingVo.picture"
            alt=""
          />
        </div>
        <div class="right">
          <div class="title flexsc">
            <div class="a mr-2">{{ info.shcwShippingVo.shippingName }}</div>
            <div class="b flexcc">{{ t(`dockRepair.IMOnumber`) }}:{{ info.shcwShippingVo.shippingNo }}</div>
          </div>
          <div class="attr mt-2">
            <div class="item">
              <span>{{ t(`dockRepair.attr1`) }}:</span>
              <span>{{ getDictLabel('ships_type', info.shcwShippingVo.shippingType) }}</span>
            </div>
            <div class="item">
              <span>{{ t(`dockRepair.attr2`) }}:</span>
              <span>{{ info.shcwShippingVo.totalLength }}</span>
            </div>
            <div class="item">
              <span>{{ t(`dockRepair.attr3`) }}:</span>
              <span>{{ info.shcwShippingVo.yearOfConstruction }}</span>
            </div>
            <div class="item">
              <span>{{ t(`dockRepair.attr4`) }}:</span>
              <span>{{ info.shcwShippingVo.nationality }}</span>
            </div>
            <div class="item">
              <span>{{ t(`dockRepair.attr5`) }}:</span>
              <span>{{ getDictLabel('classification_society', info.shcwShippingVo.classificationSociety) }}</span>
            </div>
            <div class="item">
              <span>{{ t(`dockRepair.attr6`) }}:</span>
              <span>{{ info.shcwShippingVo.portRegistry }}</span>
            </div>
            <div class="item">
              <span>{{ t(`dockRepair.attr7`) }}:</span>
              <span>{{ info.shcwShippingVo.shipowner }}</span>
            </div>
            <div class="item">
              <span>{{ t(`dockRepair.attr8`) }}:</span>
              <span>{{ info.shcwShippingVo.shipManagement }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="info mt-3">
        <div class="tit">{{ t('DockOrderOnlineQuotation.t34') }}</div>
        <div class="con mt-2">
          {{ info.remark }}
        </div>
      </div>

      <div class="info mt-3 keyword">
        <div class="tit">{{ t('DockOrderOnlineQuotation.t35') }}</div>
        <div class="con flexsb mt-2">
          <div
            :class="['item', 'flexcc']"
            v-for="item in info.dockImportProjectBoList"
            :key="item.projectId"
          >
            {{ item.projectName }}
          </div>
        </div>
      </div>

      <div class="info mt-3">
        <div
          :class="['table', 'mt-2', locale]"
          v-if="info.dockOrderDetailBoList"
        >
          <el-auto-resizer>
            <template #default="{ height, width }">
              <el-table-v2
                :columns="columns"
                :data="info.dockOrderDetailBoList"
                :width="width"
                :height="height"
              :row-class="setRowClass"
                fixed
              />
            </template>
          </el-auto-resizer>
        </div>
      </div>

      <div class="info mt-3">
        <div class="tit">{{ t('attachments') }}</div>
        <div class="con mt-2">
          <div
            v-for="(item, index) in info.urlList"
            :key="index"
          >
            <a
              :href="item.url"
              target="_blank"
            >
              {{ item.file_name }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onBeforeMount, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { getDetailApi } from '@/service/dockOrder'
import { dateFormat, setItemNumber } from '@/utils/index'
import useDict from '@/hooks/useDict'
const { dictData, getDictData, getDictLabel } = useDict()

const { t, locale } = useI18n()

watch(locale, () => {
  init()
})

const router = useRouter()
const route = useRoute()

const id = route.query.id

onBeforeMount(() => {
  init()
})

//
const info = ref(null)
const getDetail = () => {
  getDetailApi(id).then(({ data }) => {
    setItemNumber(data.dockOrderDetailBoList)
    data.remark = data.remark === '以下维修项目以报价为目的，仅供报价参考使用，实际修理技术要求和工艺要求及验收标准，以船东、船级社、船厂质量标准为主；' || data.remark === "The main purpose of this list is for yard's quotation, all technical requirements of repair items to be complied with Owner, Class and Yard's quality standards / practice." ? t('dockRepair.statementValue') : data.remark
    info.value = data
  })
}


// 行 class
const setRowClass = ({ columns, rowData, rowIndex }) => {
  // console.log(columns, rowData, rowIndex, '---')
  let str = ''

  if (rowData.projectLevel !== null) {
    str += ` projectLevel-${rowData.projectLevel}`
  }

  return str
}

// 表格 列
const columns = computed(() => {
  return [
    {
      title: t('dockRepair.coltit1'), // 项目编号
      key: 'itemNumber',
      dataKey: 'itemNumber',
      width: 100,
      class: 'itemNumber',
      align: 'center'
    },
    {
      title: t('dockRepair.coltit2'), // 项目类型
      key: 'projectName',
      dataKey: 'projectName',
      width: 650,
      cellRenderer: ({ rowData, rowIndex }) => {
        return rowData.projectName
      }
    },
    {
      title: t('dockRepair.coltit3'), // 项目类型说明
      key: 'projectContent',
      dataKey: 'projectContent',
      width: 200,
      cellRenderer: ({ rowData, rowIndex }) => {
        return rowData.projectContent
      }
    },
    {
      title: t('dockRepair.coltit4'), // 单位
      key: 'unit',
      dataKey: 'unit',
      width: 130
    },
    {
      title: t('dockRepair.coltit5'), // 数量
      key: 'requireCount',
      dataKey: 'requireCount',
      width: 130
    }
  ]
})

const init = async () => {
  getDictData('ships_type')
  getDictData('classification_society')
  getDetail()
}
</script>

<style scoped lang="scss">
.DockOrderDetail {
  background: #f5f5f5;
  padding: 30px 0;
  margin-bottom: -76px;

  .keyword .con {
    gap: 20px;
    .item {
      cursor: default;
      color: #252628;
      background: #f0f3f8;
      padding: 15px 40px;
      border-radius: 4px;
    }

    .item:last-child {
      margin-right: auto;
    }
  }

  .info {
    background: #fff;
    padding: 24px;
    > .tit {
      border-bottom: 2px solid #252628;
      font-weight: bold;
      padding: 10px 0;
    }
  }
  .ship {
    display: grid;
    grid-template-columns: 272px auto;
    gap: 30px;
    .left {
      width: 272px;
      height: 180px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .right {
      .title {
        .a {
          font-size: 20px;
          font-weight: bold;
        }
        .b {
          min-width: 180px;
          padding: 0 10px;
          height: 38px;
          background: rgba($color: #3376e5, $alpha: 0.1);
          color: #3376e5;
          border-radius: 4px;
        }
      }
      .attr {
        display: grid;
        grid-template-columns: repeat(2, 50%);
        gap: 15px;
        span {
          font-size: 12px;
          &:first-of-type {
            color: #9d9fa5;
            margin-right: 5px;
          }
        }
      }
    }
  }

   .table {
      border-top: 2px solid #252628;
      height: 700px;

      :deep(.el-table-v2__header-cell) {
        background: #f0f3f8;
        color: #252628;
      }
      :deep(.no-save) {
        background: #f9ecd9;
      }
      :deep(.projectLevel-0) {
        background: #f7f9fb;
      }

      :deep(.projectLevel-0),
      :deep(.projectLevel-1),
      :deep(.projectLevel-2) {
        .itemNumber {
          justify-content: center;
        }
      }
      :deep(.projectLevel-3),
      :deep(.projectLevel-4) {
        .itemNumber {
          justify-content: right;
        }
      }

      // &.en {
        :deep(.el-table-v2__header-cell) {
          font-family: 'Sitka Display Semibold';
          * {
            font-size: 17px;
          }
        }

        :deep(.projectLevel-0) {
          font-family: 'Amasis MT Pro Medium';
          * {
            font-size: 17px;
            font-weight: bold;
          }
        }
        :deep(.projectLevel-1) {
          font-family: '等线';
          * {
            font-size: 16px;
            font-weight: bold;
          }
        }

        :deep(.projectLevel-2, .projectLevel-3, .projectLevel-4) {
          font-family: 'Abadi';
          * {
            font-size: 15px;
          }
        }
      // }
    }
}
</style>
